<template>
  <div class="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-100 py-16">
    <div class="container mx-auto px-4">
      <h1 ref="pageTitle" class="mb-16 text-center text-5xl font-bold opacity-0">
        GSAP Animation Examples
      </h1>

      <!-- 基础动画示例 -->
      <section class="mb-24">
        <h2 ref="sectionTitle1" class="mb-8 text-3xl font-semibold opacity-0">Basic Animations</h2>

        <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
          <!-- 示例1: 点击触发动画 -->
          <div class="rounded-lg bg-white p-6 shadow-md">
            <h3 class="mb-4 text-xl font-medium">Click Animation</h3>
            <div class="mb-4 flex h-40 items-center justify-center rounded-md bg-gray-100">
              <div
                ref="box1"
                class="h-16 w-16 cursor-pointer rounded-md bg-blue-500"
                @click="animateBox"
              ></div>
            </div>
            <p class="text-gray-600">Click the blue box to trigger an animation</p>
          </div>

          <!-- 示例2: Hover动画 -->
          <div class="rounded-lg bg-white p-6 shadow-md">
            <h3 class="mb-4 text-xl font-medium">Hover Animation</h3>
            <div class="mb-4 flex h-40 items-center justify-center rounded-md bg-gray-100">
              <div
                ref="box2"
                class="h-16 w-16 cursor-pointer rounded-md bg-purple-500"
                @mouseenter="hoverIn"
                @mouseleave="hoverOut"
              ></div>
            </div>
            <p class="text-gray-600">Hover over the purple box</p>
          </div>
        </div>
      </section>

      <!-- 滚动触发动画 -->
      <section class="mb-24">
        <h2 ref="sectionTitle2" class="mb-8 text-3xl font-semibold opacity-0">Scroll Animations</h2>

        <div class="space-y-16">
          <!-- 从左到右的动画序列 -->
          <div>
            <h3 class="mb-4 text-xl font-medium">Sequence Animation</h3>
            <div class="flex flex-wrap justify-center gap-4">
              <div
                v-for="i in 5"
                :key="i"
                :ref="el => (sequenceBoxes[i - 1] = el)"
                class="h-16 w-16 -translate-x-8 rounded-md bg-gradient-to-br from-green-400 to-green-600 opacity-0"
              ></div>
            </div>
          </div>

          <!-- 视差滚动效果 -->
          <div>
            <h3 class="mb-4 text-xl font-medium">Parallax Effect</h3>
            <div ref="parallaxContainer" class="relative h-64 overflow-hidden rounded-lg">
              <div
                ref="parallaxBg"
                class="absolute inset-0 bg-gradient-to-r from-blue-400 to-indigo-600"
              ></div>
              <div ref="parallaxMid" class="absolute inset-0 flex items-center justify-center">
                <div class="h-32 w-32 rounded-full bg-white/20 backdrop-blur-sm"></div>
              </div>
              <div ref="parallaxFront" class="absolute inset-0 flex items-center justify-center">
                <h3 class="text-2xl font-bold text-white">Parallax</h3>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 横向滚动动画 -->
      <section class="mb-24">
        <h2 ref="sectionTitle3" class="mb-8 text-3xl font-semibold opacity-0">Horizontal Scroll</h2>

        <!-- 横向滚动包装器 - 全屏高度 -->
        <div ref="horizontalWrapper" class="relative h-screen">
          <!-- 固定在屏幕中央的容器 -->
          <div
            ref="horizontalSection"
            class="absolute top-1/2 left-1/2 h-[60vh] w-[90vw] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-2xl shadow-2xl"
          >
            <div ref="horizontalContainer" class="flex h-full w-[400%]">
              <div
                class="flex w-1/4 items-center justify-center bg-gradient-to-br from-red-500 to-pink-600"
              >
                <div class="text-center text-white">
                  <div class="mb-4 text-6xl">🚀</div>
                  <h4 class="mb-3 text-3xl font-bold">启程</h4>
                  <p class="text-lg opacity-90">当滚动到这里时，容器会固定在屏幕中央</p>
                </div>
              </div>
              <div
                class="flex w-1/4 items-center justify-center bg-gradient-to-br from-blue-500 to-cyan-600"
              >
                <div class="text-center text-white">
                  <div class="mb-4 text-6xl">⚡</div>
                  <h4 class="mb-3 text-3xl font-bold">加速</h4>
                  <p class="text-lg opacity-90">然后开始横向滚动展示内容</p>
                </div>
              </div>
              <div
                class="flex w-1/4 items-center justify-center bg-gradient-to-br from-emerald-500 to-teal-600"
              >
                <div class="text-center text-white">
                  <div class="mb-4 text-6xl">🎯</div>
                  <h4 class="mb-3 text-3xl font-bold">专注</h4>
                  <p class="text-lg opacity-90">继续横向滚动浏览更多内容</p>
                </div>
              </div>
              <div
                class="flex w-1/4 items-center justify-center bg-gradient-to-br from-purple-500 to-violet-600"
              >
                <div class="text-center text-white">
                  <div class="mb-4 text-6xl">🏆</div>
                  <h4 class="mb-3 text-3xl font-bold">成功</h4>
                  <p class="text-lg opacity-90">滚动结束，恢复正常滚动</p>
                </div>
              </div>
            </div>

            <!-- 进度指示器 -->
            <div class="absolute bottom-6 left-1/2 flex -translate-x-1/2 space-x-2">
              <div
                v-for="i in 4"
                :key="i"
                ref="el => progressDots[i-1] = el"
                class="h-2 w-8 rounded-full bg-white/30 transition-all duration-300"
              ></div>
            </div>
          </div>
        </div>
      </section>

      <!-- 高级动画示例 -->
      <section>
        <h2 ref="sectionTitle4" class="mb-8 text-3xl font-semibold opacity-0">
          Advanced Animations
        </h2>

        <div class="rounded-lg bg-white p-6 shadow-md">
          <h3 class="mb-4 text-xl font-medium">Text Animation</h3>
          <p ref="textAnim" class="py-8 text-center text-2xl font-medium opacity-0">
            <span
              v-for="(char, index) in 'GSAP is awesome!'.split('')"
              :key="index"
              class="inline-block"
            >
              {{ char }}
            </span>
          </p>
          <div class="flex justify-center">
            <button
              class="rounded-md bg-indigo-600 px-4 py-2 font-medium text-white transition-colors hover:bg-indigo-700"
              @click="animateText"
            >
              Play Animation
            </button>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 引用元素
const pageTitle = ref(null)
const sectionTitle1 = ref(null)
const sectionTitle2 = ref(null)
const sectionTitle3 = ref(null)
const sectionTitle4 = ref(null)
const box1 = ref(null)
const box2 = ref(null)
const sequenceBoxes = ref([])
const parallaxBg = ref(null)
const parallaxMid = ref(null)
const parallaxFront = ref(null)
const parallaxContainer = ref(null)
const horizontalWrapper = ref(null)
const horizontalSection = ref(null)
const horizontalContainer = ref(null)
const progressDots = ref([])
const textAnim = ref(null)

onMounted(() => {
  const { $gsap, $ScrollTrigger } = useNuxtApp()

  // 清理之前的ScrollTrigger实例
  $ScrollTrigger.killAll()

  // 等待DOM完全渲染后再初始化
  $gsap.delayedCall(0.1, () => {
    // 刷新ScrollTrigger
    $ScrollTrigger.refresh()

    // 初始动画
    $gsap.to(pageTitle.value, { opacity: 1, duration: 1, delay: 0.2 })
    $gsap.to(sectionTitle1.value, { opacity: 1, duration: 0.8, delay: 0.4 })

    // 滚动触发的标题动画
    $ScrollTrigger.create({
      trigger: sectionTitle2.value,
      start: 'top 80%',
      onEnter: () => {
        $gsap.to(sectionTitle2.value, { opacity: 1, duration: 0.8 })
      },
    })

    $ScrollTrigger.create({
      trigger: sectionTitle3.value,
      start: 'top 80%',
      onEnter: () => {
        $gsap.to(sectionTitle3.value, { opacity: 1, duration: 0.8 })
      },
    })

    $ScrollTrigger.create({
      trigger: sectionTitle4.value,
      start: 'top 80%',
      onEnter: () => {
        $gsap.to(sectionTitle4.value, { opacity: 1, duration: 0.8 })
      },
    })

    // 初始化进度指示器
    $gsap.set(progressDots.value[0], { scaleX: 1.5, backgroundColor: 'rgba(255,255,255,0.9)' })
    $gsap.set(progressDots.value.slice(1), { scaleX: 1, backgroundColor: 'rgba(255,255,255,0.3)' })

    // 序列动画
    $ScrollTrigger.create({
      trigger: sequenceBoxes.value[0],
      start: 'top 80%',
      onEnter: () => {
        $gsap.to(sequenceBoxes.value, {
          opacity: 1,
          x: 0,
          duration: 0.6,
          stagger: 0.1,
          ease: 'back.out(1.7)',
        })
      },
    })

    // 视差效果
    $ScrollTrigger.create({
      trigger: parallaxContainer.value,
      start: 'top bottom',
      end: 'bottom top',
      scrub: true,
      onUpdate: self => {
        const progress = self.progress
        $gsap.set(parallaxBg.value, { y: progress * 50 })
        $gsap.set(parallaxMid.value, { y: progress * 30 })
        $gsap.set(parallaxFront.value, { y: progress * 10 })
      },
    })

    // 横向滚动效果 - 居中固定（简化版本）
    if (horizontalWrapper.value && horizontalContainer.value && horizontalSection.value) {
      // 重置容器位置
      $gsap.set(horizontalContainer.value, { x: 0 })

      // 计算横向滚动距离
      const containerWidth = horizontalContainer.value.scrollWidth
      const viewportWidth = horizontalSection.value.offsetWidth
      const horizontalDistance = containerWidth - viewportWidth

      // 创建简化的横向滚动动画
      const horizontalTween = $gsap.to(horizontalContainer.value, {
        x: -horizontalDistance,
        ease: 'none',
        scrollTrigger: {
          trigger: horizontalWrapper.value,
          start: 'top top',
          end: `bottom+=${horizontalDistance}px top`,
          pin: true,
          scrub: true,
          refreshPriority: -1,
          onUpdate: self => {
            // 简化的进度指示器更新
            const progress = self.progress
            const currentSlide = Math.min(Math.floor(progress * 4), 3)

            progressDots.value.forEach((dot, index) => {
              if (dot) {
                $gsap.set(dot, {
                  scaleX: index === currentSlide ? 1.5 : 1,
                  backgroundColor:
                    index === currentSlide ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.3)',
                })
              }
            })
          },
        },
      })

      // 存储引用
      window.horizontalScrollTween = horizontalTween
    }
  }) // 结束 delayedCall
})

// 页面卸载时清理ScrollTrigger
onUnmounted(() => {
  const { $ScrollTrigger } = useNuxtApp()
  $ScrollTrigger.killAll()
  // 清理全局引用
  if (window.horizontalScrollTween) {
    delete window.horizontalScrollTween
  }
})

// 点击动画
const animateBox = () => {
  const { $gsap } = useNuxtApp()
  $gsap.to(box1.value, {
    rotation: '+=360',
    scale: 1.2,
    duration: 0.6,
    ease: 'back.out(1.7)',
    onComplete: () => {
      $gsap.to(box1.value, {
        scale: 1,
        duration: 0.3,
      })
    },
  })
}

// Hover动画
const hoverIn = () => {
  const { $gsap } = useNuxtApp()
  $gsap.to(box2.value, {
    scale: 1.3,
    borderRadius: '50%',
    duration: 0.3,
    ease: 'power2.out',
  })
}

const hoverOut = () => {
  const { $gsap } = useNuxtApp()
  $gsap.to(box2.value, {
    scale: 1,
    borderRadius: '0.375rem',
    duration: 0.3,
    ease: 'power2.out',
  })
}

// 文字动画
const animateText = () => {
  const { $gsap } = useNuxtApp()
  const chars = textAnim.value.querySelectorAll('span')

  $gsap.set(chars, { opacity: 0, y: 20 })
  $gsap.to(textAnim.value, { opacity: 1, duration: 0 })

  $gsap.to(chars, {
    opacity: 1,
    y: 0,
    duration: 0.5,
    stagger: 0.05,
    ease: 'back.out(1.7)',
  })
}
</script>
